import { FormOutlined, PlusOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';

import { RoleService } from '@/services/role';
import { ProDescriptionsItemProps, ProTable } from '@ant-design/pro-components';
import { Button, Divider, message, Popconfirm } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
const UserPage: React.FC = ({ roleCategoryEnum, children }) => {
  const {
    actionRef,
    queryHandler,
    removeHandler,
    change_pwdHandler,
  } = useModel('User.model', (model) => {
    return {
      actionRef: model.actionRef,
      queryHandler: model.queryHandler,
      removeHandler: model.removeHandler,
      change_pwdHandler: model.change_pwdHandler,
    };
  });

  // const [echoModel, setEchoModel] = useState([]);
  // useEffect(() => {
  //   (async () => {
  //     const data = await RoleService.queryRoleList();
  //     setEchoModel(data);
  //   })();
  // }, []);
  const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      align: 'center',
      width: 60,
    },
    // {
    //   title: '',
    //   dataIndex: 'role_id',
    //   hideInSearch: true,
    //   hideInTable: true,
    //   formItemProps: {
    //     hidden: true, //不在表单中显示，但仍然会搜集和校验字段，点击提交时仍然会被汇总起来
    //   },
    // },
    {
      title: '用户名',
      dataIndex: 'user_name',
      initialValue: '',
      formItemProps: {
        roules: [
          { required: true, message: '用户姓名为必填项' },
          { min: 2, max: 10, message: '用户名字长度在2-10之间' },
        ],
      },
    },
    {
      title: '用户角色',
      dataIndex: 'role_id',
      valueEnum: roleCategoryEnum,
    },
    {
      title: '操作',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      render: (_, record) => (
        <>
          <Popconfirm
            title={`你确定要删除吗？`}
            onConfirm={async () => {
              const success = await removeHandler(record.user_name);
              if (success) actionRef.current?.reloadAndRest?.();
            }}
            onCancel={() => message.info('你取消了删除操作')}
            okText="确定"
            cancelText="取消"
            placement="topRight"
          >
            <Button type="primary">删除</Button>
          </Popconfirm>
          <Divider type="vertical" />
          {React.cloneElement(
            children[1],
            { echoRecord: record },
            <Button icon={<FormOutlined />}>角色分配</Button>,
          )}
          <Popconfirm
            title={`你确定要重置密码吗？`}
            onConfirm={async () => {
              const success = await change_pwdHandler(record);
              if (success) actionRef.current?.reloadAndRest?.();
            }}
            onCancel={() => message.info('你取消了重置密码操作')}
            okText="确定"
            cancelText="取消"
            placement="topRight"
          >
            <Button type="primary">重置密码</Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  const proTableProps = {
    cardBordered: true,
    bordered: true,
    headerTitle: '用户列表',
    search: { searchText: '搜索', resetText: '重置' },
    actionRef: actionRef,
    pagination: { pageSize: 10 },
    toolBarRender: () =>React.cloneElement(children[0], null,
        <Button type="primary" icon={<PlusOutlined />}>
          新增
        </Button>,
    ),
    rowKey: 'user_name',
    columns: columns,
    request: async (params: any) => {
      const { user_name, role_id, current, pageSize } = params;
      const { list, total } = await queryHandler({
        user_name,
        role_id,
        begin: (current - 1) * pageSize,
        pageSize,
      });
      return {
        data: list,
        success: true,
        total: total,
      };
    },
  };
  return <ProTable<API.UserInfo> {...proTableProps}></ProTable>;
};
export default UserPage;
